<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创意个人网站 - Web端原型</title>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 全局样式 */
        :root {
            --primary-color: #4361ee;
            --secondary-color: #ff4d5a;
            --accent-color: #4ecca3;
            --light-bg: #f8f9fa;
            --dark-bg: #343a40;
            --light-text: #f8f9fa;
            --dark-text: #343a40;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--dark-text);
            background-color: var(--light-bg);
            margin: 0;
            padding: 0;
            transition: background-color 0.3s, color 0.3s;
        }

        body.dark-mode {
            background-color: var(--dark-bg);
            color: var(--light-text);
        }

        .container {
            max-width: 1400px;  /* 增加宽度适应大屏 */
            margin: 0 auto;
            padding: 20px;
        }

        /* 标题样式 */
        h1, h2, h3 {
            font-weight: 700;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        h2 {
            font-size: 2rem;
            margin-bottom: 0.8rem;
            color: var(--primary-color);
        }

        h3 {
            font-size: 1.5rem;
            margin-bottom: 0.6rem;
        }

        /* Web端原型容器样式 */
        .prototype-section {
            padding: 30px 0;
            border-bottom: 1px solid #ddd;
            margin-bottom: 40px;
        }

        .prototype-section:last-child {
            border-bottom: none;
        }

        .prototype-title {
            font-size: 1.8rem;
            color: var(--primary-color);
            border-left: 5px solid var(--secondary-color);
            padding-left: 15px;
            margin-bottom: 30px;
        }

        .prototype-description {
            max-width: 800px;
            margin-bottom: 30px;
            font-size: 1.1rem;
        }

        /* 固定导航栏样式 */
        .fixed-navbar {
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(90deg, var(--primary-color), #1a2a6c);
            color: white;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 40px;
            height: 70px;
        }

        .nav-brand {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav-links {
            display: flex;
            gap: 25px;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 5px;
            transition: all 0.3s;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: white;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: width 0.3s;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-actions {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .nav-button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .nav-button:hover {
            background-color: #e6374a;
            transform: translateY(-2px);
        }

        .lang-selector {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 5px 10px;
            cursor: pointer;
        }

        /* 全屏英雄区样式 */
        .hero-fullscreen {
            height: calc(100vh - 70px);
            display: flex;
            position: relative;
            overflow: hidden;
        }

        .hero-bg-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(var(--primary-color) 1px, transparent 1px), 
                              radial-gradient(var(--primary-color) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
            opacity: 0.05;
            z-index: 0;
        }

        .hero-visual {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .hero-image {
            max-width: 80%;
            max-height: 80%;
            z-index: 2;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

        .hero-circle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
        }

        .circle-1 {
            width: 300px;
            height: 300px;
            background-color: var(--primary-color);
            top: -100px;
            right: -50px;
        }

        .circle-2 {
            width: 200px;
            height: 200px;
            background-color: var(--secondary-color);
            bottom: 50px;
            right: 100px;
        }

        .hero-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 50px;
            z-index: 2;
        }

        .hero-tagline {
            font-size: 1.2rem;
            color: var(--secondary-color);
            margin-bottom: 20px;
            letter-spacing: 1px;
        }

        .hero-heading {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .hero-description {
            font-size: 1.2rem;
            margin-bottom: 40px;
            max-width: 500px;
        }

        .hero-cta {
            display: flex;
            gap: 20px;
        }

        .cta-button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .cta-button.secondary {
            background-color: transparent;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
        }

        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--dark-text);
            font-size: 0.9rem;
            opacity: 0.7;
            animation: fadeInUp 2s infinite;
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translate(-50%, 20px);
            }
            100% {
                opacity: 0.7;
                transform: translate(-50%, 0);
            }
        }

        /* 双列关于我样式 */
        .about-two-columns {
            display: flex;
            gap: 50px;
        }

        .about-left {
            flex: 1;
        }

        .about-right {
            flex: 1;
        }

        .profile-large {
            width: 100%;
            max-width: 400px;
            border-radius: 10px;
            object-fit: cover;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .about-content {
            margin-bottom: 30px;
        }

        .about-tabs {
            display: flex;
            border-bottom: 2px solid #eee;
            margin-bottom: 30px;
        }

        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            margin-right: 20px;
            transition: all 0.3s;
        }

        .tab.active {
            border-bottom-color: var(--primary-color);
            color: var(--primary-color);
            font-weight: bold;
        }

        .stats-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .stat-box {
            flex: 1;
            text-align: center;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin: 0 10px;
        }

        .dark-mode .stat-box {
            background-color: #424242;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }

        .dark-mode .stat-label {
            color: #ccc;
        }

        .skills-horizontal {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 30px;
        }

        .skill-bar-container {
            flex: 1 1 45%;
            min-width: 200px;
        }

        .skill-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .skill-percentage {
            color: var(--primary-color);
            font-weight: bold;
        }

        .skill-progress-bar {
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }

        .skill-progress {
            height: 100%;
            background-color: var(--primary-color);
            border-radius: 4px;
        }

        .cv-download {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s;
            margin-top: 20px;
        }

        .cv-download:hover {
            color: var(--secondary-color);
        }

        /* 网格作品集样式 */
        .portfolio-filters {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .filter-button {
            background-color: transparent;
            border: 1px solid #ddd;
            padding: 8px 20px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .filter-button.active {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        .filter-button:hover:not(.active) {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .portfolio-item {
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
        }

        .portfolio-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .portfolio-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
            display: block;
        }

        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(23, 37, 85, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }

        .portfolio-title {
            color: white;
            font-size: 1.5rem;
            margin-bottom: 10px;
            text-align: center;
        }

        .portfolio-category {
            color: var(--accent-color);
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }

        .portfolio-links {
            display: flex;
            gap: 20px;
        }

        .portfolio-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: white;
            color: var(--primary-color);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
        }

        .portfolio-link:hover {
            background-color: var(--secondary-color);
            color: white;
            transform: scale(1.1);
        }

        /* 博客双列布局样式 */
        .blog-layout {
            display: flex;
            gap: 40px;
        }

        .blog-main {
            flex: 2;
        }

        .blog-sidebar {
            flex: 1;
        }

        .blog-featured {
            display: flex;
            margin-bottom: 40px;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .dark-mode .blog-featured {
            background-color: #424242;
        }

        .featured-image {
            flex: 1;
            object-fit: cover;
            height: 300px;
        }

        .featured-content {
            flex: 1;
            padding: 30px;
        }

        .blog-category {
            display: inline-block;
            background-color: rgba(67, 97, 238, 0.1);
            color: var(--primary-color);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-bottom: 10px;
        }

        .blog-date {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .dark-mode .blog-date {
            color: #ccc;
        }

        .blog-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--dark-text);
        }

        .dark-mode .blog-title {
            color: var(--light-text);
        }

        .blog-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .blog-card-horizontal {
            display: flex;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
        }

        .dark-mode .blog-card-horizontal {
            background-color: #424242;
        }

        .blog-card-horizontal:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .blog-thumbnail {
            width: 200px;
            object-fit: cover;
        }

        .blog-card-content {
            padding: 20px;
            flex: 1;
        }

        .sidebar-widget {
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

        .dark-mode .sidebar-widget {
            background-color: #424242;
        }

        .widget-title {
            font-size: 1.2rem;
            margin-bottom: 20px;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }

        .dark-mode .widget-title {
            border-bottom-color: #555;
        }

        .categories-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .categories-list li {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .dark-mode .categories-list li {
            border-bottom-color: #555;
        }

        .categories-list li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .category-count {
            background-color: rgba(67, 97, 238, 0.1);
            color: var(--primary-color);
            padding: 2px 8px;
            border-radius: 20px;
            font-size: 0.8rem;
        }

        .recent-post {
            display: flex;
            margin-bottom: 15px;
            gap: 15px;
        }

        .recent-post:last-child {
            margin-bottom: 0;
        }

        .recent-post-img {
            width: 70px;
            height: 70px;
            border-radius: 10px;
            object-fit: cover;
        }

        .recent-post-content {
            flex: 1;
        }

        .recent-post-title {
            font-size: 0.9rem;
            margin-bottom: 5px;
        }

        .recent-post-date {
            font-size: 0.8rem;
            color: #666;
        }

        .dark-mode .recent-post-date {
            color: #ccc;
        }

        .search-form {
            display: flex;
        }

        .search-input {
            flex: 1;
            border: 1px solid #ddd;
            border-radius: 5px 0 0 5px;
            padding: 10px 15px;
            font-size: 1rem;
        }

        .search-button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 0 5px 5px 0;
            padding: 0 15px;
            cursor: pointer;
        }

        /* 联系信息并排样式 */
        .contact-split {
            display: flex;
            gap: 50px;
        }

        .contact-left {
            flex: 1;
        }

        .contact-right {
            flex: 1;
        }

        .contact-info {
            margin-bottom: 40px;
        }

        .contact-method {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .contact-icon {
            width: 50px;
            height: 50px;
            background-color: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
        }

        .contact-details h4 {
            margin: 0;
            margin-bottom: 5px;
        }

        .contact-map {
            height: 400px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        /* 音乐播放器样式优化 */
        .music-player-web {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
        }

        .music-artwork {
            width: 120px;
            height: 120px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            margin-bottom: 20px;
            border: 5px solid rgba(255, 255, 255, 0.2);
        }

        .music-info {
            margin-bottom: 20px;
        }

        .music-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .music-artist {
            opacity: 0.8;
            font-size: 1rem;
        }

        .player-advanced-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
        }

        .control-button {
            background: none;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
        }

        .control-button:hover {
            transform: scale(1.2);
        }

        .play-button {
            width: 60px;
            height: 60px;
            background-color: white;
            color: var(--primary-color);
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .progress-container {
            height: 5px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            margin: 10px 0;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

        .progress-bar {
            height: 100%;
            width: 35%;
            background-color: white;
            border-radius: 5px;
        }

        .time-display {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            opacity: 0.8;
        }

        .music-features {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .music-feature {
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0.8;
            transition: all 0.3s;
            cursor: pointer;
        }

        .music-feature:hover {
            opacity: 1;
        }

        .music-feature i {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        .music-feature span {
            font-size: 0.8rem;
        }

        /* 响应式调整 */
        @media (max-width: 1200px) {
            .hero-heading {
                font-size: 3rem;
            }
            
            .portfolio-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 992px) {
            .about-two-columns,
            .blog-layout,
            .contact-split,
            .hero-fullscreen {
                flex-direction: column;
            }
            
            .hero-fullscreen {
                height: auto;
                padding: 50px 0;
            }
            
            .hero-content,
            .hero-visual {
                text-align: center;
                padding: 20px;
            }
            
            .about-left, 
            .about-right,
            .blog-main,
            .blog-sidebar,
            .contact-left,
            .contact-right {
                width: 100%;
            }
            
            .blog-featured {
                flex-direction: column;
            }
            
            .featured-image {
                width: 100%;
                height: 200px;
            }
            
            .blog-thumbnail {
                width: 120px;
            }

            .fixed-navbar {
                padding: 0 20px;
            }
            
            .portfolio-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .stats-row {
                flex-direction: column;
                gap: 15px;
            }
            
            .stat-box {
                margin: 0;
            }
            
            .blog-card-horizontal {
                flex-direction: column;
            }
            
            .blog-thumbnail {
                width: 100%;
                height: 180px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Web端个人网站原型设计</h1>
        <p>以下是针对电脑桌面设备优化的Web端原型设计，展示了更适合大屏幕的布局和交互方式。</p>
        
        <!-- 固定导航栏原型 -->
        <section class="prototype-section">
            <h2 class="prototype-title">固定导航栏</h2>
            <p class="prototype-description">采用固定顶部导航，滚动时保持可见，提供持续的导航访问。加入了多语言切换和快捷操作按钮。</p>
            
            <div class="fixed-navbar">
                <div class="nav-brand">张三的个人空间</div>
                <div class="nav-links">
                    <a href="#">首页</a>
                    <a href="#">关于我</a>
                    <a href="#">作品集</a>
                    <a href="#">博客</a>
                    <a href="#">联系我</a>
                </div>
                <div class="nav-actions">
                    <div class="lang-selector">
                        <i class="fas fa-globe"></i>
                        <span>中文</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <button class="nav-button">
                        <i class="fas fa-download"></i> 下载简历
                    </button>
                </div>
            </div>
        </section>
        
        <!-- 全屏首页英雄区 -->
        <section class="prototype-section">
            <h2 class="prototype-title">全屏首页英雄区</h2>
            <p class="prototype-description">使用全屏设计创造强烈的第一印象，左右分栏布局更适合宽屏设备显示。</p>
            
            <div class="hero-fullscreen">
                <div class="hero-bg-pattern"></div>
                
                <div class="hero-content">
                    <p class="hero-tagline">全栈开发者 · UI/UX设计师 · 摄影爱好者</p>
                    <h1 class="hero-heading">嗨，我是张三<br>用代码和设计创造未来</h1>
                    <p class="hero-description">我专注于打造美观实用的Web应用和移动端产品，帮助企业和个人实现数字化转型。</p>
                    <div class="hero-cta">
                        <button class="cta-button">
                            <i class="fas fa-eye"></i> 查看作品集
                        </button>
                        <button class="cta-button secondary">
                            <i class="fas fa-paper-plane"></i> 联系我
                        </button>
                    </div>
                </div>
                
                <div class="hero-visual">
                    <div class="circle-1 hero-circle"></div>
                    <div class="circle-2 hero-circle"></div>
                    <img src="https://via.placeholder.com/600x400" alt="创意插图" class="hero-image">
                </div>
                
                <div class="scroll-indicator">
                    <i class="fas fa-chevron-down"></i>
                    <span>向下滚动</span>
                </div>
            </div>
        </section>
        
        <!-- 双列关于我页面 -->
        <section class="prototype-section">
            <h2 class="prototype-title">双列关于我页面</h2>
            <p class="prototype-description">利用左右分栏提高信息展示效率，结合统计数据和水平技能条更加直观。</p>
            
            <div class="about-two-columns">
                <div class="about-left">
                    <img src="https://via.placeholder.com/500x600" alt="个人照片" class="profile-large">
                </div>
                
                <div class="about-right">
                    <div class="about-tabs">
                        <div class="tab active">个人介绍</div>
                        <div class="tab">技能专长</div>
                        <div class="tab">工作经历</div>
                    </div>
                    
                    <div class="about-content">
                        <h2>关于我</h2>
                        <p>你好！我是张三，一位拥有5年经验的全栈开发者和UI/UX设计师。我热衷于将创意转化为功能完善的数字产品，持续学习新技术并将其应用到实际项目中。</p>
                        <p>在我的职业生涯中，我与多个初创公司和企业合作，帮助他们构建在线形象并优化用户体验。我相信设计与技术的完美结合是创造卓越产品的关键。</p>
                    </div>
                    
                    <div class="stats-row">
                        <div class="stat-box">
                            <div class="stat-number">5+</div>
                            <div class="stat-label">年工作经验</div>
                        </div>
                        <div class="stat-box">
                            <div class="stat-number">50+</div>
                            <div class="stat-label">完成项目</div>
                        </div>
                        <div class="stat-box">
                            <div class="stat-number">30+</div>
                            <div class="stat-label">满意客户</div>
                        </div>
                        <div class="stat-box">
                            <div class="stat-number">15+</div>
                            <div class="stat-label">获奖作品</div>
                        </div>
                    </div>
                    
                    <div class="skills-horizontal">
                        <div class="skill-bar-container">
                            <div class="skill-label">
                                <span>HTML/CSS</span>
                                <span class="skill-percentage">95%</span>
                            </div>
                            <div class="skill-progress-bar">
                                <div class="skill-progress" style="width: 95%;"></div>
                            </div>
                        </div>
                        
                        <div class="skill-bar-container">
                            <div class="skill-label">
                                <span>JavaScript</span>
                                <span class="skill-percentage">90%</span>
                            </div>
                            <div class="skill-progress-bar">
                                <div class="skill-progress" style="width: 90%;"></div>
                            </div>
                        </div>
                        
                        <div class="skill-bar-container">
                            <div class="skill-label">
                                <span>React/Vue</span>
                                <span class="skill-percentage">85%</span>
                            </div>
                            <div class="skill-progress-bar">
                                <div class="skill-progress" style="width: 85%;"></div>
                            </div>
                        </div>
                        
                        <div class="skill-bar-container">
                            <div class="skill-label">
                                <span>UI/UX设计</span>
                                <span class="skill-percentage">80%</span>
                            </div>
                            <div class="skill-progress-bar">
                                <div class="skill-progress" style="width: 80%;"></div>
                            </div>
                        </div>
                    </div>
                    
                    <a href="#" class="cv-download">
                        <i class="fas fa-download"></i> 下载完整简历（PDF）
                    </a>
                </div>
            </div>
        </section>
        
        <!-- 项目展示筛选网格 -->
        <section class="prototype-section">
            <h2 class="prototype-title">项目作品集</h2>
            <p class="prototype-description">利用网格布局展示项目作品，添加筛选功能和悬停效果增强交互体验。</p>
            
            <div class="portfolio-filters">
                <button class="filter-button active">全部</button>
                <button class="filter-button">Web应用</button>
                <button class="filter-button">移动应用</button>
                <button class="filter-button">UI/UX设计</button>
                <button class="filter-button">品牌设计</button>
            </div>
            
            <div class="portfolio-grid">
                <div class="portfolio-item">
                    <img src="https://via.placeholder.com/400x300" alt="项目预览" class="portfolio-image">
                    <div class="portfolio-overlay">
                        <div class="portfolio-category">Web应用</div>
                        <h3 class="portfolio-title">创新电商平台</h3>
                        <div class="portfolio-links">
                            <a href="#" class="portfolio-link"><i class="fas fa-link"></i></a>
                            <a href="#" class="portfolio-link"><i class="fas fa-search-plus"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="portfolio-item">
                    <img src="https://via.placeholder.com/400x300" alt="项目预览" class="portfolio-image">
                    <div class="portfolio-overlay">
                        <div class="portfolio-category">移动应用</div>
                        <h3 class="portfolio-title">旅行社交APP</h3>
                        <div class="portfolio-links">
                            <a href="#" class="portfolio-link"><i class="fas fa-link"></i></a>
                            <a href="#" class="portfolio-link"><i class="fas fa-search-plus"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="portfolio-item">
                    <img src="https://via.placeholder.com/400x300" alt="项目预览" class="portfolio-image">
                    <div class="portfolio-overlay">
                        <div class="portfolio-category">UI/UX设计</div>
                        <h3 class="portfolio-title">金融管理系统</h3>
                        <div class="portfolio-links">
                            <a href="#" class="portfolio-link"><i class="fas fa-link"></i></a>
                            <a href="#" class="portfolio-link"><i class="fas fa-search-plus"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="portfolio-item">
                    <img src="https://via.placeholder.com/400x300" alt="项目预览" class="portfolio-image">
                    <div class="portfolio-overlay">
                        <div class="portfolio-category">品牌设计</div>
                        <h3 class="portfolio-title">咖啡品牌形象</h3>
                        <div class="portfolio-links">
                            <a href="#" class="portfolio-link"><i class="fas fa-link"></i></a>
                            <a href="#" class="portfolio-link"><i class="fas fa-search-plus"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="portfolio-item">
                    <img src="https://via.placeholder.com/400x300" alt="项目预览" class="portfolio-image">
                    <div class="portfolio-overlay">
                        <div class="portfolio-category">Web应用</div>
                        <h3 class="portfolio-title">健康生活平台</h3>
                        <div class="portfolio-links">
                            <a href="#" class="portfolio-link"><i class="fas fa-link"></i></a>
                            <a href="#" class="portfolio-link"><i class="fas fa-search-plus"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="portfolio-item">
                    <img src="https://via.placeholder.com/400x300" alt="项目预览" class="portfolio-image">
                    <div class="portfolio-overlay">
                        <div class="portfolio-category">移动应用</div>
                        <h3 class="portfolio-title">智能家居控制</h3>
                        <div class="portfolio-links">
                            <a href="#" class="portfolio-link"><i class="fas fa-link"></i></a>
                            <a href="#" class="portfolio-link"><i class="fas fa-search-plus"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 博客双列布局 -->
        <section class="prototype-section">
            <h2 class="prototype-title">博客内容</h2>
            <p class="prototype-description">采用左右双列布局，主内容区展示文章列表，侧边栏显示分类与推荐内容。</p>
            
            <div class="blog-layout">
                <div class="blog-main">
                    <div class="blog-featured">
                        <img src="https://via.placeholder.com/600x300" alt="特色文章配图" class="featured-image">
                        <div class="featured-content">
                            <span class="blog-category">前端开发</span>
                            <h3 class="blog-title">现代Web开发的最佳实践与性能优化</h3>
                            <div class="blog-date">
                                <i class="far fa-calendar-alt"></i> 2023年10月15日
                            </div>
                            <p>随着Web技术的快速发展，如何构建高性能、可维护的现代Web应用变得越来越重要。本文分享了一系列实用的开发技巧和优化策略...</p>
                            <a href="#" class="cta-button">
                                阅读全文
                            </a>
                        </div>
                    </div>
                    
                    <div class="blog-list">
                        <div class="blog-card-horizontal">
                            <img src="https://via.placeholder.com/300x200" alt="文章配图" class="blog-thumbnail">
                            <div class="blog-card-content">
                                <span class="blog-category">设计思考</span>
                                <h3 class="blog-title">用户体验设计中的情感化设计</h3>
                                <div class="blog-date">
                                    <i class="far fa-calendar-alt"></i> 2023年9月28日
                                </div>
                                <p>情感化设计是提升用户体验的关键因素，它能让产品与用户建立更深层次的连接。本文探讨了如何在界面设计中融入情感元素...</p>
                                <a href="#" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                        
                        <div class="blog-card-horizontal">
                            <img src="https://via.placeholder.com/300x200" alt="文章配图" class="blog-thumbnail">
                            <div class="blog-card-content">
                                <span class="blog-category">技术探索</span>
                                <h3 class="blog-title">深入理解React Hooks及实战应用</h3>
                                <div class="blog-date">
                                    <i class="far fa-calendar-alt"></i> 2023年9月15日
                                </div>
                                <p>React Hooks的出现彻底改变了React组件的编写方式，使函数组件拥有了状态管理和生命周期等能力。本文深入剖析Hooks的工作原理和实战技巧...</p>
                                <a href="#" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                        
                        <div class="blog-card-horizontal">
                            <img src="https://via.placeholder.com/300x200" alt="文章配图" class="blog-thumbnail">
                            <div class="blog-card-content">
                                <span class="blog-category">职业发展</span>
                                <h3 class="blog-title">从初级到高级：Web开发者成长路径</h3>
                                <div class="blog-date">
                                    <i class="far fa-calendar-alt"></i> 2023年8月30日
                                </div>
                                <p>如何从一名初级开发者成长为高级工程师？本文分享了我的个人经验和建议，涵盖技能培养、项目实践和自我提升等多个方面...</p>
                                <a href="#" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="blog-sidebar">
                    <div class="sidebar-widget">
                        <h3 class="widget-title">搜索</h3>
                        <div class="search-form">
                            <input type="text" class="search-input" placeholder="搜索文章...">
                            <button class="search-button"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                    
                    <div class="sidebar-widget">
                        <h3 class="widget-title">文章分类</h3>
                        <ul class="categories-list">
                            <li>
                                <span>前端开发</span>
                                <span class="category-count">12</span>
                            </li>
                            <li>
                                <span>UI/UX设计</span>
                                <span class="category-count">8</span>
                            </li>
                            <li>
                                <span>职业发展</span>
                                <span class="category-count">5</span>
                            </li>
                            <li>
                                <span>技术探索</span>
                                <span class="category-count">7</span>
                            </li>
                            <li>
                                <span>项目管理</span>
                                <span class="category-count">4</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="sidebar-widget">
                        <h3 class="widget-title">热门文章</h3>
                        <div class="recent-post">
                            <img src="https://via.placeholder.com/70x70" alt="文章缩略图" class="recent-post-img">
                            <div class="recent-post-content">
                                <div class="recent-post-title">2023年值得关注的Web开发趋势</div>
                                <div class="recent-post-date">2023年7月15日</div>
                            </div>
                        </div>
                        <div class="recent-post">
                            <img src="https://via.placeholder.com/70x70" alt="文章缩略图" class="recent-post-img">
                            <div class="recent-post-content">
                                <div class="recent-post-title">如何优化网站加载速度</div>
                                <div class="recent-post-date">2023年6月28日</div>
                            </div>
                        </div>
                        <div class="recent-post">
                            <img src="https://via.placeholder.com/70x70" alt="文章缩略图" class="recent-post-img">
                            <div class="recent-post-content">
                                <div class="recent-post-title">响应式设计的5个常见错误</div>
                                <div class="recent-post-date">2023年6月10日</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 联系方式分栏 -->
        <section class="prototype-section">
            <h2 class="prototype-title">联系方式</h2>
            <p class="prototype-description">采用左右分栏布局，左侧为联系表单和联系方式，右侧为地图位置展示。</p>
            
            <div class="contact-split">
                <div class="contact-left">
                    <div class="contact-info">
                        <h3>联系信息</h3>
                        <p>如果您有任何问题或合作意向，请随时通过以下方式联系我：</p>
                        
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="contact-details">
                                <h4>邮箱</h4>
                                <p>zhangsan@example.com</p>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div class="contact-details">
                                <h4>电话</h4>
                                <p>+86 138 xxxx xxxx</p>
                            </div>
                        </div>
                        
                        <div class="contact-method">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="contact-details">
                                <h4>地址</h4>
                                <p>北京市朝阳区xxx街xxx号</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="contact-form">
                        <h3>发送消息</h3>
                        <div class="form-group">
                            <label for="name" class="form-label">姓名</label>
                            <input type="text" id="name" class="form-input" placeholder="请输入您的姓名">
                        </div>
                        <div class="form-group">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" id="email" class="form-input" placeholder="请输入您的邮箱">
                        </div>
                        <div class="form-group">
                            <label for="subject" class="form-label">主题</label>
                            <input type="text" id="subject" class="form-input" placeholder="请输入消息主题">
                        </div>
                        <div class="form-group">
                            <label for="message" class="form-label">留言内容</label>
                            <textarea id="message" class="form-textarea" placeholder="请输入您的留言内容" rows="5"></textarea>
                        </div>
                        <button class="cta-button">
                            <i class="fas fa-paper-plane"></i> 发送消息
                        </button>
                    </div>
                </div>
                
                <div class="contact-right">
                    <div class="contact-map">
                        <!-- 地图嵌入示意 -->
                        <img src="https://via.placeholder.com/600x400?text=地图位置" alt="地图位置" style="width:100%; height:100%; object-fit:cover;">
                    </div>
                    
                    <div style="margin-top:30px;">
                        <h3>社交媒体</h3>
                        <p>你也可以通过以下社交媒体平台关注我：</p>
                        <div style="display:flex; gap:15px; margin-top:15px;">
                            <a href="#" style="width:40px; height:40px; background-color:var(--primary-color); color:white; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:1.2rem;">
                                <i class="fab fa-weixin"></i>
                            </a>
                            <a href="#" style="width:40px; height:40px; background-color:var(--primary-color); color:white; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:1.2rem;">
                                <i class="fab fa-weibo"></i>
                            </a>
                            <a href="#" style="width:40px; height:40px; background-color:var(--primary-color); color:white; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:1.2rem;">
                                <i class="fab fa-github"></i>
                            </a>
                            <a href="#" style="width:40px; height:40px; background-color:var(--primary-color); color:white; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:1.2rem;">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="#" style="width:40px; height:40px; background-color:var(--primary-color); color:white; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:1.2rem;">
                                <i class="fab fa-behance"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 音乐播放器优化版 -->
        <section class="prototype-section">
            <h2 class="prototype-title">增强版音乐播放器</h2>
            <p class="prototype-description">针对大屏设备优化的音乐播放器，提供更丰富的控制功能和视觉效果。</p>
            
            <div class="music-player-web">
                <div style="display:flex; gap:30px;">
                    <div>
                        <img src="https://via.placeholder.com/120x120" alt="专辑封面" class="music-artwork">
                    </div>
                    <div style="flex:1;">
                        <div class="music-info">
                            <div class="music-title">春风十里</div>
                            <div class="music-artist">鹿先森乐队 - 《所有的酒馆与鹿角》</div>
                        </div>
                        
                        <div class="progress-container">
                            <div class="progress-bar"></div>
                        </div>
                        
                        <div class="time-display">
                            <span>01:35</span>
                            <span>04:28</span>
                        </div>
                        
                        <div class="player-advanced-controls">
                            <button class="control-button"><i class="fas fa-random"></i></button>
                            <button class="control-button"><i class="fas fa-step-backward"></i></button>
                            <button class="control-button play-button"><i class="fas fa-play"></i></button>
                            <button class="control-button"><i class="fas fa-step-forward"></i></button>
                            <button class="control-button"><i class="fas fa-redo"></i></button>
                        </div>
                    </div>
                </div>
                
                <div class="music-features">
                    <div class="music-feature">
                        <i class="fas fa-volume-up"></i>
                        <span>音量</span>
                    </div>
                    <div class="music-feature">
                        <i class="fas fa-list-ul"></i>
                        <span>播放列表</span>
                    </div>
                    <div class="music-feature">
                        <i class="fas fa-heart"></i>
                        <span>收藏</span>
                    </div>
                    <div class="music-feature">
                        <i class="fas fa-share-alt"></i>
                        <span>分享</span>
                    </div>
                    <div class="music-feature">
                        <i class="fas fa-download"></i>
                        <span>下载</span>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 页脚区域 -->
        <section class="prototype-section">
            <h2 class="prototype-title">页脚设计</h2>
            <p class="prototype-description">网站底部包含导航链接、联系信息和版权声明，保持整体设计风格一致性。</p>
            
            <footer style="background: linear-gradient(90deg, var(--primary-color), #1a2a6c); color:white; padding:50px 30px 30px; border-radius:10px;">
                <div style="display:flex; flex-wrap:wrap; gap:40px; margin-bottom:40px;">
                    <div style="flex:1; min-width:200px;">
                        <h3 style="font-size:1.5rem; margin-bottom:20px;">张三的个人空间</h3>
                        <p style="margin-bottom:20px; opacity:0.8;">用创意和代码构建美好的数字世界，专注于Web应用和用户体验设计。</p>
                        <div style="display:flex; gap:10px;">
                            <a href="#" style="width:36px; height:36px; background:rgba(255,255,255,0.1); border-radius:50%; display:flex; justify-content:center; align-items:center;">
                                <i class="fab fa-weixin"></i>
                            </a>
                            <a href="#" style="width:36px; height:36px; background:rgba(255,255,255,0.1); border-radius:50%; display:flex; justify-content:center; align-items:center;">
                                <i class="fab fa-weibo"></i>
                            </a>
                            <a href="#" style="width:36px; height:36px; background:rgba(255,255,255,0.1); border-radius:50%; display:flex; justify-content:center; align-items:center;">
                                <i class="fab fa-github"></i>
                            </a>
                        </div>
                    </div>
                    
                    <div style="flex:1; min-width:200px;">
                        <h3 style="font-size:1.2rem; margin-bottom:20px;">快速链接</h3>
                        <ul style="list-style:none; padding:0; opacity:0.8;">
                            <li style="margin-bottom:10px;"><a href="#" style="color:white; text-decoration:none;">首页</a></li>
                            <li style="margin-bottom:10px;"><a href="#" style="color:white; text-decoration:none;">关于我</a></li>
                            <li style="margin-bottom:10px;"><a href="#" style="color:white; text-decoration:none;">作品集</a></li>
                            <li style="margin-bottom:10px;"><a href="#" style="color:white; text-decoration:none;">博客</a></li>
                            <li style="margin-bottom:10px;"><a href="#" style="color:white; text-decoration:none;">联系我</a></li>
                        </ul>
                    </div>
                    
                    <div style="flex:1; min-width:200px;">
                        <h3 style="font-size:1.2rem; margin-bottom:20px;">联系方式</h3>
                        <ul style="list-style:none; padding:0; opacity:0.8;">
                            <li style="margin-bottom:15px; display:flex; align-items:center; gap:10px;">
                                <i class="fas fa-envelope"></i> zhangsan@example.com
                            </li>
                            <li style="margin-bottom:15px; display:flex; align-items:center; gap:10px;">
                                <i class="fas fa-phone-alt"></i> +86 138 xxxx xxxx
                            </li>
                            <li style="display:flex; align-items:center; gap:10px;">
                                <i class="fas fa-map-marker-alt"></i> 北京市朝阳区xxx街xxx号
                            </li>
                        </ul>
                    </div>
                    
                    <div style="flex:1; min-width:200px;">
                        <h3 style="font-size:1.2rem; margin-bottom:20px;">订阅更新</h3>
                        <p style="margin-bottom:15px; opacity:0.8;">订阅我的最新动态，不错过任何更新和文章。</p>
                        <div style="display:flex;">
                            <input type="email" placeholder="您的邮箱地址" style="flex:1; padding:10px; border:none; border-radius:5px 0 0 5px;">
                            <button style="background-color:var(--secondary-color); color:white; border:none; padding:0 15px; border-radius:0 5px 5px 0; cursor:pointer;">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div style="text-align:center; padding-top:30px; border-top:1px solid rgba(255,255,255,0.1); opacity:0.7; font-size:0.9rem;">
                    <p>© 2023 张三的个人网站 | 设计与开发：张三</p>
                </div>
            </footer>
        </section>
        
        <!-- 暗色模式切换按钮 -->
        <div class="theme-toggle" id="theme-toggle" style="position:fixed; bottom:30px; right:30px; width:60px; height:60px; background-color:var(--primary-color); color:white; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:1.5rem; cursor:pointer; box-shadow:0 5px 15px rgba(0,0,0,0.2); z-index:1000;">
            <i class="fas fa-moon"></i>
        </div>
    </div>

    <script>
        // 暗色/亮色模式切换功能
        const themeToggle = document.getElementById('theme-toggle');
        const themeIcon = themeToggle.querySelector('i');
        
        themeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            
            // 切换图标
            if (document.body.classList.contains('dark-mode')) {
                themeIcon.classList.remove('fa-moon');
                themeIcon.classList.add('fa-sun');
            } else {
                themeIcon.classList.remove('fa-sun');
                themeIcon.classList.add('fa-moon');
            }
        });
        
        // 模拟项目筛选功能
        const filterButtons = document.querySelectorAll('.filter-button');
        
        filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                // 移除所有按钮的active类
                filterButtons.forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // 给当前点击的按钮添加active类
                button.classList.add('active');
                
                // 这里可以添加实际的筛选逻辑
            });
        });
        
        // 模拟关于我选项卡功能
        const tabs = document.querySelectorAll('.tab');
        
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有选项卡的active类
                tabs.forEach(t => {
                    t.classList.remove('active');
                });
                
                // 给当前点击的选项卡添加active类
                tab.classList.add('active');
                
                // 这里可以添加实际的选项卡切换逻辑
            });
        });
    </script>
</body>
</html>